<template>
    <div class="student-info">
        <h4>个人信息</h4>
        <div class="info-row">
            <label for="name" class="info-label">姓名:</label>
            <input type="text" id="name" class="info-input" v-model="name" />
        </div>
        <div class="info-row">
            <label for="studentId" class="info-label">学号:</label>
            <input type="text" id="studentId" class="info-input" v-model="studentId" />
        </div>
        <div class="info-row">
            <label for="grade" class="info-label">班级:</label>
            <input type="text" id="grade" class="info-input" placeholder="例如：22计科3班" v-model="grade" />
        </div>
        <div style="text-align: center; color: red;" v-if="error_message != null">{{ error_message }}</div>
        <div class="info-row">
            <button type="button" class="btn btn-primary" @click="clickUpload">更新信息</button>
        </div>

        <!-- Success Modal -->
        <div class="modal" id="exampleModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content" style="border-radius: 8px; text-align: center;">
                <!-- 提示信息 -->
                <div class="modal-body" style="font-size: 18px; font-weight: bold; color: #555; margin: 20px 0;">
                    信息更新成功
                </div>
                <!-- 确认按钮 -->
                <div class="modal-footer" style="border-top: none; justify-content: center; padding-bottom: 20px;">
                    <button type="button" class="btn btn-success" data-bs-dismiss="modal" style="background-color: #28a745; border: none; padding: 10px 20px;">
                    OK
                    </button>
                </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';
import { Modal } from 'bootstrap/dist/js/bootstrap';    // 引入Modal的API

const store = useStore();
const name = ref(""); 
const studentId = ref("");
const grade = ref("");
const error_message = ref(null);

const clickUpload = () => {
    error_message.value = null;
    $.ajax({
        url: "http://localhost:3000/api/student/update-info",
        type: "POST",
        data: {
            name: name.value,
            studentId: studentId.value,
            grade: grade.value
        },
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message == "success") {
                name.value = resp.name;
                studentId.value = resp.studentId;
                grade.value  = resp.grade;
                const modalElement = document.getElementById('exampleModal');
                const modal = new Modal(modalElement);
                modal.show(); // 打开模态框
            } else {
                error_message.value = resp.error_message;
            }
            
        },
        error(resp) {
            console.log(resp);
        }
    })
}

const getInfo = () => {
    $.ajax({
        url: "http://localhost:3000/api/student/get-info",
        type: "GET",
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message == "success") {
                name.value = resp.name;
                studentId.value = resp.studentId;
                grade.value  = resp.grade;
            }
        },
        error(resp) {
            console.log(resp);
        }
    })
}
getInfo();

</script>

<style scoped>
.student-info {
    display: flex; 
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    width: 100%;
}

.info-row {
    display: flex;
    align-items: center; /* 确保 label 和 input 垂直居中 */
    justify-content: center;
    gap: 15px;
}

.info-label {
    font-weight: bold;
    width: 80px;
    text-align: right;
}

.info-input {
    flex: 1;
    max-width: 400px; /* 限制输入框最大宽度 */
    padding: 10px; /* 增加内边距使其更美观 */
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 确保 padding 不影响总宽度 */
}

.btn {
    padding: 8px 15px; /* 调整按钮内边距 */
    font-size: 14px; /* 提高按钮文字的可读性 */

}
</style>
